<!-- 主页 -->

<template>
  <div :class="homeClass" :style="homeStyle">
    <HomeStandard v-if="CORE.THEME.home === 'standard'" />
    <HomeColorful v-if="CORE.THEME.home === 'colorful'" />
    <HomeNone v-if="CORE.THEME.home === 'none'" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default CORE.extend({}, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'CommonHome',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 首页样式类
     */
    homeClass() {
      const name = this.$options.name
      return `${name} ${name}-${CORE.THEME.home} full`
    },

    /**
     * 首页样式对象
     */
    homeStyle() {
      if (CORE.THEME.home !== 'colorful') return null

      const url = CORE.asset('home/colorful.png')
      return { backgroundImage: `url(${url})`, backgroundSize: '100%' }
    },
  },
})
</script>
